<template>
	<code class="lexmis-Code" v-html="html"></code>
</template>

<script>
import 'highlight.js/styles/github.css';
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import xml from 'highlight.js/lib/languages/xml';

hljs.registerLanguage('javascript',javascript);
hljs.registerLanguage('xml',xml);

export default {
	name:'Code',
	props:{
		code:String
	},
	computed:{
		html(){
			const res=hljs.highlightAuto(this.code.trim(),['html','javascript']);
			return res.value;
		}
	}
};
</script>

<style lang="scss">
.lexmis-Code{
	overflow:auto;
	display:block;
	background:#f6f6f6;
	padding:10px 20px;
	border:1px solid #d3d3d3;
	border-radius:5px;
	white-space:pre;
	tab-size:20px;
	.hljs-tag,.hljs-name{
		color:#0033B3;
	}
	.javascript{
		.hljs-keyword,.hljs-function{
			color:#0033B3;
			font-weight:normal;
		}
		.hljs-attr{
			color:#830091;
		}
		.hljs-comment{
			font-style:normal;
			color:#888;
		}
		.hljs-params{
			text-decoration:underline;
			color:#000;
		}
	}
}
</style>
